<template>
  <!-- 进/出境相关信息 -->
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="152px"
      label-position="right"
      class="flex-form"
      size="mini"
      :disabled="dialogType == 'detail'"
    >
    <el-form-item label="运输批次号" prop="manifestId">
      <el-input
        v-model.trim="form.manifestId"
        placeholder="请输入运输批次号"
        clearable
      />
    </el-form-item>
    <el-form-item label="进出境口岸" prop="customsCode">
      <el-select
        v-model="form.customsCode"
        placeholder="请选择进出境口岸"
        filterable
      >
        <el-option
          v-for="(item, index) in customsList"
          :key="index"
          :label="item.customsCode + '-' + item.customsName"
          :value="item.customsCode"
        ></el-option>
      </el-select>
    </el-form-item>
      <el-form-item label="进出口类型" prop="iEFlag">
        <el-select
          v-model="form.iEFlag"
          placeholder="请选择进类型"
           @change="iEFlagChange"
        >
          <el-option
            v-for="(item, index) in dict.type.mft_ieport_type"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="确报类型" prop="bindingType">
        <el-select
          v-model="form.bindingType"
          placeholder="请选择确报类型"
          @change="bindingTypeChange"
        >
          <el-option
            v-for="(item, index) in dict.type.mft_binding_type"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型" prop="customsStateCode">
        <el-select
          v-model="form.customsStateCode"
          placeholder="请选择确报类型"
        >
          <el-option
            v-for="(item, index) in  dict.type.mft_biz_mode"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监管场所" prop="fieldCode">
        <el-select v-model="form.fieldCode" placeholder="请选择监管场所">
          <el-option
            v-for="(item, index) in fieldOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
     <!-- <el-form-item label="运输工具代理企业代码" prop="agentCode" label-width="168px">
        <el-input
          v-model="form.agentCode"
          placeholder="请输入运输工具代理企业代码"
        />
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { findBorderPeopleAll, findShopAll, findGroupAll, findCertPreRecordAll, findCooperativeAll } from "@/api/bt/bmhs"
export default {
  props: {
    customsList: {
      type: Array,
    },
    fieldOptions: {
      type: Array,
    },
    dict: {},
    detailData: {
      type: Object,
      default: () => {}
    },
    dialogType: {}
  },
  data() {
    return {
      form: {
        iEFlag: "",
        bindingType: null,
        manifestId: null,
        customsCode: null,
        fieldCode: null,
        customMasterCode: null,
        msgRepName: null,
        agentCode: null,
        customsStateCode: null
      },
      add_mft_binding_type:[
      {value:"MT4403",label:"公路进口空载运输工具承运确报"},
      {value:"MT4404",label:"公路出口空载运输工具承运确报"},
      {value:"MT4405",label:"公路进口空集装箱（器）运输工具承运确报"},
      {value:"MT4406",label:"公路出口空集装箱（器）运输工具承运确报"}
      ],
      // 表单校验
      rules: {
        customsCode: [
          {
            type: "string",
            required: true,
            message: "选择抵达第一目的港日期不能为空",
            trigger: "blur",
          },
        ],
        iEFlag: [
          {
            type: "string",
            required: true,
            message: "进出口标志不能为空",
            trigger: "blur",
          },
        ],
        bindingType: [
          {
            type: "string",
            required: true,
            message: "确报类型不能为空",
            trigger: "blur",
          },
        ],
        manifestId: [
          {
            type: "string",
            required: true,
            message: "运输批次号不能为空",
            trigger: "blur",
          },
        ],
        customsStateCode: [
          {
            type: "string",
            required: true,
            message: "海关货物通关代码不能为空",
            trigger: "blur",
          },
        ],
        msgRepName: [
          {
            type: "string",
            required: true,
            message: "舱单传输人名称不能为空",
            trigger: "blur",
          },
        ],
      },
      // 边民列表
      borderOptions: [],
      // 商铺列表
      shopOptions: [],
      // 互助组列表
      groupOptions: [],
      // 合作社列表
      cooperativeOptions: [],
      // 证书预备案编号
      certList: []
    };
  },
  watch: {
    "detailData.id": {
      immediate: true,
      handler(val) {
        if (val) {
          for (let key in this.form) {
            this.form[key] = this.detailData[key];
          }
          this.form.borderCode = this.detailData.declareName;
          this.form.ciphertextIdno = this.detailData.idno;
          this.form.busiMode = this.detailData.btrnbBizModecd;
          this.form.cooperativeCode = this.detailData.orgName;
          // this.getAllBorder();
          // if (this.form.declareType === "2") {
          //   this.getAllShop();
          // } else if (this.form.declareType === "3") {
          //   this.getAllCooperative();
          // } else if (this.form.declareType === "4") {
          //   this.getAllGroup();
          // }
          // this.$emit("changeDeclType", this.form.declareType);
          // this.$emit("changeShowCert", this.form.isPutrec);
        }
      },
    },
  },
  methods: {
    trafModeChange(val) {
      if(val === "9") {  //运输工具类型 9-其他
        this.rules.trafType[0].required = true;
        this.rules.voyageNo[0].required = false;
      } else {  //出口
        this.rules.trafType[0].required = false;
        this.rules.voyageNo[0].required = true;
      }

    },
    // 申报业务模式
    bindingTypeChange(val) {
      if("MT4403"==this.form.bindingType||"MT4404"==this.form.bindingType){
        this.form.customsStateCode="RD10";
      }else if("MT4405"==this.form.bindingType){
        this.form.customsStateCode="RD11";
      }else if("MT4406"==this.form.bindingType){
        this.form.customsStateCode="RD12";
      }
    },
    //进出口类型变更
    iEFlagChange(){
       this.add_mft_binding_type=[];
      if("I"==this.form.iEFlag){
        this.add_mft_binding_type.push({value:"MT4403",label:"公路进口空载运输工具承运确报"});
        this.add_mft_binding_type.push({value:"MT4405",label:"公路进口空集装箱（器）运输工具承运确报"});
      }else if("E"==this.form.iEFlag){
        this.add_mft_binding_type.push({value:"MT4404",label:"公路出口空载运输工具承运确报"});
        this.add_mft_binding_type.push({value:"MT4406",label:"公路出口空集装箱（器）运输工具承运确报"});
      }else{
        this.add_mft_binding_type.push({value:"MT4403",label:"公路进口空载运输工具承运确报"});
        this.add_mft_binding_type.push({value:"MT4405",label:"公路进口空集装箱（器）运输工具承运确报"});
        this.add_mft_binding_type.push({value:"MT4404",label:"公路出口空载运输工具承运确报"});
        this.add_mft_binding_type.push({value:"MT4406",label:"公路出口空集装箱（器）运输工具承运确报"});
      }
    },
    // 选择申报人
    borderCodeChange(val) {
      let selectedObj = this.borderOptions.filter(item => item.id == val)[0];
      this.form.ciphertextIdno = selectedObj.idCardNo;
      this.form.customsCode = selectedObj.customsCode;
      this.form.fieldCode = selectedObj.fieldCode;

    },
    // 选择商铺
    shopChange(val) {
      let selectedObj = this.shopOptions.filter(item => item.id == val)[0];
      this.form.customsCode = selectedObj.customsCode;
      this.form.fieldCode = selectedObj.fieldCode;
    },
    // 选择互助组
    groupChange(val) {
      let selectedObj = this.groupOptions.filter(item => item.id == val)[0];
      this.form.customsCode = selectedObj.customsCode;
      this.form.fieldCode = selectedObj.fieldCode;
    },
    // 选择合作社
    cooperativeChange(val) {
      let selectedObj = this.cooperativeOptions.filter(item => item.id == val)[0];
      this.form.customsCode = selectedObj.customsCode;
      this.form.fieldCode = selectedObj.fieldCode;
      this.form.orgScc = selectedObj.orgSccd;
    },
    clearvalue() {
      this.form.ciphertextIdno = null;
      this.form.customsCode = null;
      this.form.fieldCode = null;
      this.form.shopCode = null;
      this.form.supportGroupCode = null;
      this.form.cooperativeCode = null;
      this.form.orgScc = null;
      this.form.borderCode = null;
      this.form.ciphertextIdno = null;
    },
    // 查询边民
    getAllBorder() {
      findBorderPeopleAll().then(res => {
        this.borderOptions = res.rows;
      })
    },
    // 查询商品
    getAllShop() {
      findShopAll().then(res => {
        this.shopOptions = res.rows;
      })
    },
    // 查询互助组
    getAllGroup() {
      findGroupAll().then(res => {
        this.groupOptions = res.rows;
      })
    },
    // 查询合作社
    getAllCooperative() {
      findCooperativeAll().then(res => {
        this.cooperativeOptions = res.rows;
      })
    },
    // 如果涉及证书预备案
    isPutrecChange(val) {
      this.$emit("changeShowCert", val);
      if(val === '1') {
        this.getAllCert();
      }
    },
    certPutrecNoChange(val) {
      let id = this.certList.filter(item => item.putrecNo === val)[0].id;
      this.$emit("receiveCertNo", id)
    },
    getAllCert() {
      findCertPreRecordAll().then(res => {
        this.certList = res.rows;
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.flex-form {
  ::v-deep .el-form-item {
    width: 312px;
  }
  ::v-deep .el-form-item__label {
    line-height: 14px;
    display: flex;
    align-items: center;
    height: 32px;
    justify-content: flex-end;
  }
}
</style>
